<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    body {
      margin:  0px;
      padding: 0px;
    }
  </style>
  <meta charset="UTF-8">
  <title>Rounded Corners</title>
</head>
<body>
  <canvas id="myCanvas" width="578," height="200"></canvas>
  <script type="text/javascript">
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var rectWidth = 200;
    var rectHeight = 100;
    var rectX = 189;
    var rectY = 50;
    var cornerRadius = 50;

    context.beginPath();
    context.moveTo(rectX, rectY);
    context.lineTo(rectX + rectWidth - cornerRadius, rectY);
    context.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + cornerRadius, cornerRadius);
    context.lineTo(rectX + rectWidth, rectY + rectHeight);
    context.lineWidth = 5;
    context.strokeStyle = '#6BAFC1';
    context.stroke();
  </script>
</body>
</html>
